<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新标签页</title>
</head>

<body>
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./js.js"></script>

    <ul id="test-list">
        <li>JavaScript</li>
        <li>Swift</li>
        <li>HTML</li>
        <li>ANSI C</li>
        <li>CSS</li>
        <li>DirectX</li>

        <p>如果你点我，我就会消失。</p>
        <p>继续点我!</p>
        <p>接着点我!</p>
    </ul>

    <form id="test-form" action="test">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span
                        class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a>
            </p>
            <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
            <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
            <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
            <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
            <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
            <p><button type="submit">Submit</button></p>
        </fieldset>
    </form>

    <script>
        // 当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；
        // 当用户去掉“全不选”时，自动不选中所有语言；
        // 当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；
        // 当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”；
        // 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。

        //=========================================
        // var SelAll = document.getElementsByTagName('input');
        // SelAll[0].onclick = function () {
        //     var b = document.getElementsByTagName('input');
        //     if (b[0].checked === true) {
        //         b[1].checked = true;
        //         b[2].checked = true;
        //         b[3].checked = true;
        //         b[4].checked = true;
        //         b[5].checked = true;
        //     } else {
        //         b[0].checked = false;
        //         b[1].checked = false;
        //         b[2].checked = false;
        //         b[3].checked = false;
        //         b[4].checked = false;
        //         b[5].checked = false;
        //     }
        // }

        // var reverse = document.getElementsByClassName('invertSelect')
        // reverse[0].onclick = function () {
        //     var b = document.getElementsByTagName('input');
        //     for (let i = 1; i < b.length; i++) {
        //         if (b[i].checked === true) {
        //             b[i].checked = false;
        //             b[0].checked = false;
        //         } else {
        //             b[i].checked = true;
        //             b[0].checked = false;
        //         } if (b[1].checked === true &&
        //             b[2].checked === true &&
        //             b[3].checked === true &&
        //             b[4].checked === true &&
        //             b[5].checked === true) {
        //             b[0].checked = true;
        //         }
        //     }

        // }

        // var a = function () {
        //     var lang = document.getElementsByName('lang');
        //     var b = document.getElementsByTagName('input');
        //     for (let i = 0; i < lang.length; i++) {
        //         lang[i].onclick = function () {
        //             if (lang[i].checked === false) {
        //                 b[0].checked = false;
        //             }
        //             if (b[1].checked === true &&
        //                 b[2].checked === true &&
        //                 b[3].checked === true &&
        //                 b[4].checked === true &&
        //                 b[5].checked === true) {
        //                 b[0].checked = true;
        //             }
        //         }
        //     }
        // }();

        //=========================================================================
        var a = document.getElementsByClassName('selectAll');
        var b = document.getElementsByTagName("input");
        //全选
        b[0].onclick = function () {
            var b = document.getElementsByTagName('input');

            for (let i = 1; i < b.length; i++) {
                if (b[0].checked === true) {
                    b[i].checked = true;
                } else if (b[0].checked === false) {
                    b[i].checked = false;
                }
            }
        }

        //反选
        var inversel = document.getElementsByClassName("invertSelect");
        inversel[0].onclick = function(){
            if (isNsell() === false) {
                for (let i = 1; i < b.length; i++) {
                    if (b[i].checked === true) {
                        b[i].checked = false;
                    } else if (b[i].checked === false) {
                        b[i].checked = true;
                    }
                    b[0].checked = false;
                }
            } else if (isNsell() === true) {
                for (let i = 0; i < b.length; i++) {
                    if (b[i].checked === true) {
                        b[i].checked = false;
                    } else if (b[i].checked === false) {
                        b[i].checked = true;
                    }
                }
            }
        }

        
        function fg() {
            if (isNsell() === false) {
                for (let i = 1; i < b.length; i++) {
                    if (b[i].checked === true) {
                        b[i].checked = false;
                    } else if (b[i].checked === false) {
                        b[i].checked = true;
                    }
                    b[0].checked = false;
                }
            } else if (isNsell() === true) {
                for (let i = 0; i < b.length; i++) {
                    if (b[i].checked === true) {
                        b[i].checked = false;
                    } else if (b[i].checked === false) {
                        b[i].checked = true;
                    }
                }
            }

        }

        //逐个点击
        for (let i = 1; i < b.length; i++) {
            b[i].onclick = function () {
                if (isall() === false) {
                    b[0].checked = false;
                }
                if (isall() === true) {
                    b[0].checked = true;
                }
            }

        }
        //判断全选、全不选
        function isNsell() {
            var count = 0;
            for (let i = 1; i < b.length; i++) {
                if (b[i].checked === true) {
                    count++;
                } else if (b[i].checked === false) {
                    count--;
                }
            }
            if (count === b.length-1 || count === -(b.length-1)) {
                return true;
            }
            return false;
        };

        //判断全选
        function isall() {
            var count = 0;
            for (let i = 1; i < b.length; i++) {
                if (b[i].checked === true) {
                    count++;
                } else if (b[i].checked === false) {
                    count--;
                }
            }
            if (count === b.length-1 ) {
                return true;
            }
            return false;
        };








        // var parent = document.getElementById('test-list');
        // var child = document.getElementsByTagName('li');
        // parent.removeChild(child[1]);
        // parent.removeChild(child[2]);
        // parent.removeChild(child[3]);

        // $(document).ready(function(){
        //     $("p").click(function(){
        //       $(this).hide();
        //     });
        //   });
        // $(function(){
        //     var li = document.getElementsByTagName('li');
        //     $(li[1]).remove();
        //     $(li[2]).remove();
        //     $(li[3]).remove();
        // });


    </script>
</body>

</html>